<template>
    <div class="contain">
        <h2>系统登录</h2>
        <el-form ref="loginRef" :model="FormData" :rules="rules" label-width="70px" class="form">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="FormData.username"  />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" show-password v-model="FormData.password"/>
            </el-form-item>
            <el-form-item>
                <el-button round plain type="success" @click="login">sign up</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang = 'ts'>
import { reactive, getCurrentInstance} from "vue"
import {FormRules} from 'element-plus'
import {useRouter} from 'vue-router'
import { useStore } from "../../store";
const FormData = reactive({
    username: '',
    password: ''
})
const app = getCurrentInstance()
const router = useRouter()
const test = useStore()
// 表单验证
const rules = reactive<FormRules>({
    username:{required:true,message:'请输入密码',trigger:'blur'},
    password:[
        {required:true,message:'请输入密码',trigger:'blur'}
    ]
})
// 登录
const login = ()=>{
    app?.proxy?.$refs.loginRef.validate( async (valid:any)=>{
        if(valid){
            const res = await app.proxy?.$api.login(FormData)
            if(res){
                test.setRoutes(res.menu)
                test.addMenu(router)
                test.setToken(res.token)
                router.push('/')
            }
        }
    })
}
</script>

<style lang="less" scoped>
.contain{
    width: 300px;
    height: 230px;
    box-shadow: 0 0 20px rgb(199, 197, 197);
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 10px;
    h2{
        line-height: 60px;
        text-align: center;
    }
    .form{
        width: 260px;
    }
}
</style>
